<!--CSS指层叠样式表Cascading Style Sheets,用来定义如何显示html元素,通常储存在样式表中-->
<!--当同一个html元素被不止一个样式定义时,处理优先级为:内联样式(html元素内部)>内部样式表(位于<head>标签内)>外部样式表>浏览器缺省设置-->   
<!DOCTYPE>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="mystyle.css" />
        <!--当样式需要应用于很多页面时，外部样式表将是理想的选择-->
    </head>
    <div>
        <img src="http://www.w3school.com.cn/i/ct_css_selector.gif">
    </div>
    <div>
        <h1>我是一个一级标题</h1>
        <h2>我是一个二级标题</h2>
        <h3>我是一个三级标题</h3>
        <h4><i>我是一个四级标题</i></h4>
        <h5><u>我是一个五级标题</u></h5>
        <h6><b>我是一个六级标题</b></h6>
        <!--i为字体斜体,u为字体带下划线,b为字体粗体-->
    </div>
    <ul class="ul">
        <li>我是一个列1</li>
        <li>我是一个列2</li>
        <li>我<strong> 不 </strong>是一个列3</li>
    </ul>
    <span>
        <p id="red">我是红色的</p>
        <p id="blue">我是蓝色的</p>
    </span>
    <div>
        <input type="text" value="请输入内容">
    </div>
    <p class="sp">This is some text. This is some text.</p>
    <p class="p">中      文   可 以    么</p>
    <p class="ssp">the field is our
         battleground
    </p>
    <p class="sssp">中文
        可以
        么
    </p>
    <p class="ssssp">a s d a s d a s d a
        d
    </p>
    <div>
        <a href="https://www.baidu.com/" class="href">请点击</a>
    </div>
    <ul class="list">
        <li>11111</li>
        <li>22222</li>
        <li>33333</li>
        <li>44444</li>
    </ul>
    <p class="op">亮晶晶</p>
    <div id="d1"></div>
    <div id="d2"></div>
    <div id="outer">
        <div id="inner"></div>
    </div>

</html>

<style>
    img {
        background-color: black;
        margin: 20px;
        padding: 15px;
    }
    /*选择器{声明;声明},声明为键值对格式,即属性:值*/
    h1 ,h2 ,h3{
        color:gray;
        background-color: black;
    }
    /*可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明,需要用,分开*/
    div {
        font-family: Verdana, sans-serif;
    }
    h2 {
        font-family: Times, "Times New Roman", serif;
    }
    /*
    根据上面这条规则，站点的 body 元素将使用 Verdana 字体（假如访问者的系统中存在该字体的话）。
    如果不希望继承字体,可以重新定义不希望继承的标签内容
    */
    li strong {
        font-style: italic;
        font-weight: normal;
    }
    /*派生选择器允许根据文档的上下文关系来确定某个标签的样式,通过合理使用派生选择器使页面变得整洁*/
    #red {
        color: red;
    }
    #blue {
        color: blue;
    }
    /*为标为id的html元素定义样式,用#来定义*/
    .ul {
        font-size: 20px;
    }
    /*为标为class的html元素定义样式,用.来定义*/
    input[type="text"] {
        width:150px;
        display:block;
        margin-bottom:10px;
        background-color:yellow;
        font-family: Verdana, Arial;
    }
    /*可以为拥有指定属性的html元素设置样式，而不仅限于class和id属性*/
    .sp {
        word-spacing: -0.5em;
    }
    /*改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的*/
    .p{
        white-space: pre;
    }
    /*如果 white-space 属性的值为 pre，浏览器将会注意额外的空格*/
    .ssp{
        white-space: nowrap;
    }
    /*white-space: nowrap会防止元素中的文本换行，除非使用了一个 br 元素*/
    .sssp{
        white-space: pre-wrap;
    }
    /*当 white-space 属性设置为 pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行*/
    .ssssp{
        white-space: pre-line;
    }
    /*当 white-space 属性设置为 pre-line 时，浏览器会保留换行符，并允许自动换行，但是会合并空白符，这是与 pre-wrap 值的不同之处*/
    a:link {
        color:#FF0000;
        text-decoration:none;
        background-color:#B2FF99;
    }    /* 未被访问的链接 */
    a:visited {
        color:#00FF00;
        text-decoration:none;
        background-color:#FFFF85;
    } /* 已被访问的链接 */
    a:hover {
        color:#FF00FF;
        text-decoration:underline;
        background-color:#FF704D;
    }   /* 鼠标指针移动到链接上 */
    a:active {
        color:#0000FF;
        text-decoration:underline;
        background-color:#FF704D;
    }  /* 正在被点击的链接 */
    .href {
        width: 75px;
        display: block;
    }
    /*text-decoration 属性大多用于去掉链接中的下划线*/
    /*为了使定义生效，a:hover 必须位于 a:link 和 a:visited 之后,为了使定义生效，a:active 必须位于 a:hover 之后*/
    .list {
        list-style-type : square
        /*list-style-image : url(xxx.gif) 可以使用图像作为标志*/
    }
    /*要修改用于列表项的标志类型，可以使用属性 list-style-type*/
    /*
    list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
    list-style-image	将图象设置为列表项标志。
    list-style-position	设置列表中列表项标志的位置。
    list-style-type	设置列表项标志的类型。
    */
    .op {
        border:red solid thin;
        outline-style:dotted;
        outline-color:#00ff00;
    }
    /*轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
    只有在规定了 !DOCTYPE 时，Internet Explorer 8 （以及更高版本） 才支持 outline-color 属性
    outline	在一个声明中设置所有的轮廓属性
    outline-color	设置轮廓的颜色
    outline-style	设置轮廓的样式
    outline-width	设置轮廓的宽度
    */
    #d1 {
        width:100px;
        height:100px;
        margin-top:20px;
        margin-bottom:20px;
        background-color:red;
    }
    #d2 {
        width:100px;
        height:100px;
        margin-top:10px;
        background-color:blue;
    }
    /*两个 div 之间的外边距是 20px，而不是 30px（20px + 10px）*/
    #outer {
        width:300px;
        height:300px;
        background-color: black;
        margin-top:20px;
    }
    #inner {
        width:300px;
        height:100px;
        background-color:white;
        margin-top:10px;
    }
    /*如果不设置 div 的内边距和边框，那么内部 div 的上外边距将与外部 div 的上外边距合并（叠加）*/


</style>
    
    


</style>




